<template>
  <!-- 配置表查询 -->
  <div id="box">
    <!--查询-->
    <div class="form-style">
      <el-form :inline="true" :model="param" class="demo-form-inline" size="small" ref="formName">

        <el-form-item label="工序" prop="oprPtrnCd">
          <el-select v-model="param.oprPtrnCd" filterable placeholder="请选择" style="width: 150px" clearable
                     allow-create>
            <el-option v-for="(item,index) in oprPtrnCdOption" :key="index" :label="item" :value="item">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="设备号" prop="equipmentNo">
          <el-select v-model="param.equipmentNo" filterable placeholder="请选择" style="width: 150px" clearable
                     allow-create>
            <el-option v-for="(item,index) in equipmentNoOption" :key="index" :label="item" :value="item">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="操作类型">
          <el-select clearable v-model="param.operationType" placeholder="请选择" style="width: 150px">
            <el-option label="新增1个" value="1"></el-option>
            <el-option label="更新1个" value="3"></el-option>
            <el-option label="查询1个" value="5"></el-option>
            <el-option label="删除1个" value="7"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit(1)" icon="el-icon-search">查询</el-button>
          <el-button @click="resetForm('formName')">重置</el-button>
          <el-button type="success" @click="addOuter()" plain icon="el-icon-edit" size="mini">新增</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!--列表-->
    <div style="margin-top: -15px;">
      <el-table :data="tableData" border size="small"
                :header-cell-style="{background:'#409EFF',color:'#fff', padding:'8px 0',                                    'text-align':'center'}"
                :max-height="tableHeight"
                v-loading="loading">
        <el-table-column type="index" label="序号" :index='indexMethod' align="center" width="60"/>
        <el-table-column prop="oprPtrnCd" label="工序" show-overflow-tooltip align="center"/>
        <el-table-column prop="equipmentNo" label="设备" show-overflow-tooltip align="center"/>
        <el-table-column prop="operationType" label="操作类型" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ mapOperationType(scope.row.operationType) }}
          </template>
        </el-table-column>
        <el-table-column prop="conditionName" label="配方号" show-overflow-tooltip align="center"/>
        <el-table-column label="操作" align="center" width="200px">
          <template slot-scope="scope">
            <el-button
                type="info"
                size="mini"
                icon="el-icon-view"
                @click="handleView(scope.row)"
            >查看
            </el-button>
            <el-button
                type="danger" size="mini"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>


      <el-dialog
          title="详细信息"
          :close-on-click-modal="false"
          :visible.sync="viewDialogVisible"
          append-to-body cnter
          fullscreen
          width="80%">

        <div style="margin-bottom: 10px;">
          <span style="padding-left: 5px;font-weight: 700">工序：</span>
          <span style="color: #409eff">{{ viewData.oprPtrnCd }}</span>
          <span style="margin: 0 8px; color: #999;">|</span>
          <span style="padding-left: 5px;font-weight: 700">设备：</span>
          <span style="color: #409eff">{{ viewData.equipmentNo }}</span>
          <span style="margin: 0 8px; color: #999;">|</span>
          <span style="padding-left: 5px;font-weight: 700">操作类型：</span>
          <span style="color: #409eff">{{ mapOperationType(viewData.operationType) }}</span>
          <span style="margin: 0 8px; color: #999;">|</span>
          <span style="padding-left: 5px;font-weight: 700">配方号：</span>
          <span style="color: #409eff">{{ viewData.conditionName }}</span>
          <span style="margin: 0 8px; color: #999;">|</span>
          <el-button type="success" @click="addInner()" plain icon="el-icon-edit" size="mini">新增</el-button>
        </div>

        <el-table
            :data="viewData.dtoList || []"
            border
            style="width: 100%; margin-top: 20px;"
            :header-cell-style="{ background: '#f5f7fa', color: '#303133', 'text-align': 'center' }">
          <el-table-column label="参数" prop="param" align="center" width="150"/>
          <el-table-column label="参数说明" prop="paramRemark" align="center" width="200"/>
          <el-table-column label="操作" align="center" width="100">
            <template slot-scope="scope">
              <el-button
                  type="danger" size="mini"
                  icon="el-icon-delete"
                  @click="handleDetailDelete(scope.row)"
              >删除
              </el-button>
            </template>
          </el-table-column>
          <el-table-column label="详细内容" align="center">
            <template slot-scope="scope">
              <el-table
                  :data="scope.row.dtoList"
                  border
                  size="mini"
                  style="width: 100%;">
                <el-table-column prop="paramName" label="子参数" align="center"/>
                <el-table-column prop="value" label="子参数值" align="center"/>
                <el-table-column prop="updateName" label="更新人" align="center"/>
                <el-table-column prop="updateTime" label="更新时间" align="center">
                  <template slot-scope="{ row }">
                    {{ $common.timestampTo(row.updateTime) }}
                  </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="100">
                  <template slot-scope="scope">
                    <el-button
                        type="primary"
                        size="mini"
                        icon="el-icon-edit"
                        @click="handleEdit(scope.row)"
                    >编辑
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </el-table-column>

        </el-table>
      </el-dialog>

      <!--    新增弹出框内层-->
      <el-dialog :title="title" :close-on-click-modal="false" :visible.sync="open" append-to-body center v-dialogDrag
                 :before-close="openAdd" width="610px" top="30vh">

        <el-form :model="formAdd" :label-position="labelPosition" label-width="140px" ref="formAdd" size="mini"
                 class="demo-dynamic" style="margin-top: -20px">

          <el-form-item label="参数" prop="param" :rules="[{ required: true, message: '请输入参数', trigger: 'blur' }]">
            <el-input v-model="formAdd.param" placeholder="请输入" clearable
                      style="width: 350px"></el-input>
          </el-form-item>

          <el-row>
            <el-col :span="12">
              <el-button style="margin-left: 140px;margin-bottom: 10px;" type="primary" size="mini" @click="addParam()">
                添加参数
              </el-button>
            </el-col>
          </el-row>

          <el-collapse v-if="formAdd.paramList.length > 0">
            <el-collapse-item v-for="(paramAdd, index) in formAdd.paramList" :key="index" :name="index.toString()">
              <template slot="title">{{ index + 1 }}</template>

              <el-form-item label="子参数" prop="paramName">
                <el-input v-model="paramAdd.paramName" placeholder="请输入" clearable style="width: 350px"
                ></el-input>
              </el-form-item>

              <el-form-item label="子参数值" prop="value">
                <el-input v-model="paramAdd.value" placeholder="请输入" clearable style="width: 350px"
                ></el-input>
              </el-form-item>

            </el-collapse-item>
          </el-collapse>

        </el-form>
        <div style="padding-top:10px;display: flex;justify-content: center;gap: 60px;">
          <el-button @click=openAdd() size="small" icon="el-icon-close">关闭</el-button>
          <el-popconfirm
              title="确认好了吗？"
              @onConfirm="addSubmit('formAdd')">
            <el-button slot="reference" type="primary" size="small" :disabled="submitDis" icon="el-icon-check">确 定
            </el-button>
          </el-popconfirm>
        </div>
      </el-dialog>

      <!--    新增弹出框外层-->
      <el-dialog :title="title" :close-on-click-modal="false" :visible.sync="openOuter" append-to-body center
                 v-dialogDrag
                 fullscreen
                 :before-close="openAddOuter" width="610px" top="5vh">

        <el-form :model="formAddOuter" :label-position="labelPosition" label-width="140px" ref="formAdd" size="mini"
                 class="demo-dynamic" style="margin-top: -20px">

          <el-row>
            <el-col :span="12">
              <el-form-item label="工序" prop="oprPtrnCd"
                            :rules="[{ required: true, message: '请输入工序', trigger: 'change' }]">
                <el-select v-model="formAddOuter.oprPtrnCd" filterable placeholder="请选择" style="width: 400px"
                           clearable>
                  <el-option v-for="(item, index) in oprPtrnCdOption" :key="index" :label="item"
                             :value="item"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="设备号" prop="equipmentNo"
                            :rules="[{ required: true, message: '请输入参数', trigger: 'change' }]">
                <el-select v-model="formAddOuter.equipmentNo" filterable placeholder="请选择" style="width: 400px"
                           clearable>
                  <el-option v-for="(item,index) in equipmentNoOption" :key="index" :label="item" :value="item">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="操作类型" prop="operationType"
                            :rules="[{ required: true, message: '请输入参数', trigger: 'change' }]">
                <el-select clearable v-model="formAddOuter.operationType" placeholder="请选择" style="width: 400px"
                >
                  <el-option label="新增1个" value="1"></el-option>
                  <el-option label="更新1个" value="3"></el-option>
                  <el-option label="查询1个" value="5"></el-option>
                  <el-option label="删除1个" value="7"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="配方号" prop="conditionName">
                <el-input v-model="formAddOuter.conditionName" placeholder="请输入" clearable
                          style="width: 400px"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-button style="margin-left: 140px;margin-bottom: 10px;" type="primary" size="mini"
                         @click="addParamOuter()">添加参数
              </el-button>
            </el-col>
          </el-row>

          <el-collapse v-if="formAddOuter.addOneDTOList.length > 0">
            <el-collapse-item v-for="(paramAdd, index) in formAddOuter.addOneDTOList" :key="index"
                              :name="index.toString()">
              <template slot="title">{{ index + 1 }}</template>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="参数" prop="param">
                    <el-input v-model="paramAdd.param" placeholder="请输入" clearable
                              style="width: 350px"></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-button style="margin-left: 140px" type="primary" size="mini" @click="addChildParam(index)">
                    添加子参数
                  </el-button>
                </el-col>
              </el-row>

              <el-collapse>
                <el-collapse-item v-for="(childParam, childIndex) in paramAdd.paramList" :key="childIndex">
                  <template slot="title">{{ childIndex + 1 }}</template>
                  <el-form-item label="子参数名称">
                    <el-input v-model="childParam.paramName" placeholder="请输入子参数名称" clearable
                              style="width: 350px"></el-input>
                  </el-form-item>

                  <el-form-item label="子参数值">
                    <el-input v-model="childParam.value" placeholder="请输入子参数值" clearable
                              style="width: 350px"></el-input>
                  </el-form-item>
                </el-collapse-item>
              </el-collapse>

            </el-collapse-item>
          </el-collapse>

        </el-form>
        <div style="padding-top:10px;display: flex;justify-content: center;gap: 60px;">
          <el-button @click=openAddOuter() size="small" icon="el-icon-close">关闭</el-button>
          <el-popconfirm
              title="确认好了吗？"
              @onConfirm="addSubmitOuter('formAdd')">
            <el-button slot="reference" type="primary" size="small" :disabled="submitDis" icon="el-icon-check">确 定
            </el-button>
          </el-popconfirm>
        </div>
      </el-dialog>

      <!--编辑弹出框-->
      <el-dialog :close-on-click-modal="false" :title="title" :visible.sync="openEdit" append-to-body center
                 v-dialogDrag width="610px">
        <el-form :model="formEdit" :label-position="labelPosition" label-width="100px" ref="formEdit" size="mini"
                 class="demo-dynamic">

          <el-form-item label="子参数" prop="paramName">
            <el-input clearable v-model="formEdit.paramName" style="width: 400px"></el-input>
          </el-form-item>

          <el-form-item label="子参数值" prop="value">
            <el-input clearable v-model="formEdit.value" style="width: 400px"></el-input>
          </el-form-item>

        </el-form>
        <div style="padding-top:10px;display: flex;justify-content: center;gap: 60px;">
          <el-button @click="openEdit = false" size="small" icon="el-icon-close">关闭</el-button>
          <el-popconfirm
              title="确认好了吗？"
              @onConfirm="editSubmit">
            <el-button slot="reference" type="primary" size="small" :disabled="submitDis" icon="el-icon-check">确 定
            </el-button>
          </el-popconfirm>
        </div>
      </el-dialog>

    </div>
  </div>
</template>

<script>
/*
 * 服务： 树脂塞孔配方更改 : Formula Remote Controller
 * 数据库：formula
 * 数据表：`tb_iot_opc_collection_latest`
 * **/
export default {
  name: "configurationList",//配置表查询
  inject: ['reload'],
  //组件注册
  components: {},

  data() {

    return {
      //防止频繁点击
      submitDis: false,
      // 表格高度
      tableHeight: document.documentElement.clientHeight - 210,
      // 遮罩层
      loading: false,
      count: 0,

      title: "",
      labelPosition: 'right',
      labelWidth: '100px',

      open: false,
      openEdit: false,
      openOuter: false,

      param: {
        "begin": null,
        "equipmentNo": "",
        "limit": 10,
        "operationType": null,
        "oprPtrnCd": "",
        "page": 1
      },

      oprPtrnCdOption: [],  //工序下拉
      equipmentNoOption: [],  //设备号下拉

      // 表格
      tableData: [],

      viewDialogVisible: false, // 弹窗
      viewData: {}, // 查看

      // 新增
      formAdd: {
        "conditionName": "",
        "equipmentNo": "",
        "operationType": null,
        "oprPtrnCd": "",
        "param": "",
        "paramList": [
          {
            "paramName": "",
            "value": ""
          }
        ],
        "updateName": ""
      },

      // 新增外层
      formAddOuter: {
        "addOneDTOList": [
          {
            "param": "",
            "paramList": [
              {
                "paramName": "",
                "value": ""
              }
            ]
          }
        ],
        "conditionName": "",
        "equipmentNo": "",
        "operationType": null,
        "oprPtrnCd": "",
        "updateName": ""
      },

      // 编辑
      formEdit: {
        paramName: '',
        value: ''
      },

      //分页组件传参默认值
      pageData: {
        count: 0,
        page: null,
        limit: null
      },

    }
  },

  methods: {

    // 查询
    onSubmit(page) {
      if (page) {
        this.param.page = page;
      }
      this.loading = true;
      this.$ajax.post('/configuration/list', this.param, data => {
        this.tableData = data.content || [];
        this.loading = false;
        this.pageData = {
          count: data.count,
          page: this.param.page,
          limit: this.param.limit
        };
      }, error => {
        this.$message.error(error.message);
        this.loading = false;
      })
    },

    //工序下拉框查询
    selectOprPtrnCd() {
      this.$ajax.get('/equipmentAgreement/selectList', data => {
        this.oprPtrnCdOption = data.content.map(item => item.oprPtrnCd);
      });
    },

    //工序下拉框查询
    selectequipmentNo() {
      this.$ajax.get('/equipmentAgreement/selectList', data => {
        this.equipmentNoOption = data.content.map(item => item.equipmentNo);
      });
    },

    // 查看
    handleView(row) {
      const params = {
        equipmentNo: row.equipmentNo,
        operationType: row.operationType,
        oprPtrnCd: row.oprPtrnCd,
        conditionName: row.conditionName
      };
      this.$ajax.post('/configuration/one', params, data => {
        this.viewData = data.content || {};
        this.viewDialogVisible = true;
      }, error => {
        this.$message.error(error.message);
      });
    },

    // 新增弹出框
    addInner() {
      // 显示新增对话框
      this.open = true;
      this.title = '新增数据';
      // 初始化表单数据
      this.formAdd = {
        "equipmentNo": this.viewData.equipmentNo,
        "operationType": this.viewData.operationType,
        "oprPtrnCd": this.viewData.oprPtrnCd,
        "conditionName": this.viewData.conditionName,
        "param": "",
        "paramList": [
          {
            "paramName": "",
            "value": ""
          }
        ],
        "updateName": ""
      };
    },

    // 添加paramList
    addParam() {
      const newParam = {
        "paramName": "",
        "value": ""
      };
      this.formAdd.paramList.push(newParam);
    },

    //新增提交
    addSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.submitDis = true;
          setTimeout(() => {
            this.submitDis = false;
          }, 2000);
          this.$ajax.post('/configuration/add', this.formAdd, data => {
            this.open = false;
            this.$message.success(data.message);
            this.onSubmit();
          }, error => {
            this.submitDis = false;
            this.$message.error(error.message);
          });
        } else {
          return false;
        }
      });
    },

    // 新增表单关闭按钮
    openAdd() {
      this.open = false
      this.$refs.formAddOuter.resetFields();
    },

    // 新增外层
    addOuter() {
      // 显示新增对话框
      this.openOuter = true;
      this.title = '新增数据';
      // 初始化表单数据
      this.formAddOuter = {
        "addOneDTOList": [
          {
            "param": "",
            "paramList": [
              {
                "paramName": "",
                "value": ""
              }
            ]
          },
        ],
        "conditionName": "",
        "equipmentNo": "",
        "operationType": null,
        "oprPtrnCd": "",
        "updateName": ""
      };
    },

    // 添加paramList
    addParamOuter() {
      const newParam = {
        "param": "",
      };
      this.formAddOuter.addOneDTOList.push(newParam);
    },

    // 添加子参数
    addChildParam(index) {
      const newParam = {
        "paramName": "",
        "value": ""
      };
      this.formAddOuter.addOneDTOList[index].paramList.push(newParam);
    },

    // 新增外层提交
    addSubmitOuter(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.submitDis = true;
          setTimeout(() => {
            this.submitDis = false;
          }, 2000);
          this.$ajax.post('/configuration/addOne', this.formAddOuter, data => {
            this.openOuter = false;
            this.$message.success(data.message);
            this.onSubmit();
          }, error => {
            this.submitDis = false;
            this.$message.error(error.message);
          });
        } else {
          return false;
        }
      });
    },

    // 新增表单关闭按钮
    openAddOuter() {
      this.openOuter = false
      this.$refs.formAddOuter.resetFields();
    },

    // 编辑打开
    handleEdit(row) {
      this.formEdit.paramName = row.paramName;
      this.formEdit.value = row.value;
      this.formEdit.id = row.id;
      this.openEdit = true;
    },

    // 编辑提交
    editSubmit() {
      const params = {
        "id": this.formEdit.id,
        "paramUpdate": {
          "paramName": this.formEdit.paramName,
          "value": this.formEdit.value
        },
        updateName: this.formEdit.updateName,
      };

      this.$ajax.post('/configuration/update', params, (data) => {
        this.$message.success('更新成功');
        this.openEdit = false;
        this.handleView(this.viewData);
      }, (error) => {
        this.$message.error(error.message || '更新失败');
      });
    },

    /*
 * 页面展示--删除
 * */
    handleDelete(row) {
      this.$confirm('确定要删除这条记录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const params = {
          equipmentNo: row.equipmentNo,
          operationType: row.operationType,
          oprPtrnCd: row.oprPtrnCd,
          conditionName: row.conditionName,
          param: '',
        };
        this.$ajax.post('/configuration/delete', params, data => {
          this.onSubmit();
          this.$message.success('删除成功!');
        });
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    },

    // 内层删除
    handleDetailDelete(row) {
      this.$confirm(`确定要删除参数 "${row.param}" 的配置吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const params = {
          equipmentNo: this.viewData.equipmentNo,
          operationType: this.viewData.operationType,
          oprPtrnCd: this.viewData.oprPtrnCd,
          conditionName: this.viewData.conditionName,
          param: row.param
        };
        this.$ajax.post('/configuration/delete', params, data => {
          this.$message.success('删除成功！');
          this.handleView(this.viewData);
        }, error => {
          this.$message.error(error.message || '删除失败');
        });
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    },

    //重置
    resetForm() {
      this.param = {
        "begin": null,
        "equipmentNo": "",
        "limit": 10,
        "operationType": null,
        "oprPtrnCd": "",
        "page": 1
      };
      this.onSubmit(1);
    },

    // 操作类型映射
    mapOperationType(type) {
      const operationMap = {
        1: "新增1个",
        2: "新增多个",
        3: "更新1个",
        4: "更新多个",
        5: "查询一个",
        6: "查询多个",
        7: "删除一个",
        8: "删除多个"
      };
      return operationMap[type] || "未知类型";
    },

    /**
     * 列表序号
     */
    indexMethod(index) {
      let rowNo = (this.param.limit * (this.param.page - 1)) + index + 1;
      return rowNo;
    },

    /**
     * 分页子组件调用父组件的方法
     * @v obj page,limit
     * */
    pageChanged(v) {
      this.param.page = v.page;
      this.param.limit = v.limit;
      this.onSubmit();
    },

  },
  mounted() {
    this.onSubmit(1);
    this.selectOprPtrnCd();  //工序
    this.selectequipmentNo();  //设备号
  },

}
</script>

<style scoped>
#box {
  width: 100%;
  height: auto;
  margin: 0 auto;
  min-width: 1024px;
}

.span-title {
  color: #303133;
}

</style>





